<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 面包屑 -->
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjects.id ? subjects.name : '' }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <div class="sub-search">
        <el-form ref="formlist" label-width="80px">
          <span>目录名称</span>
          <el-input  v-model="formlist.directoryName" style="width: 200px;margin:0 20px ;"></el-input>
          <span>状态</span>
          <el-select style="width: 200px;margin:0 20px ;" v-model="formlist.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button size="small" @click="onClear">清除</el-button>
          <el-button  size="small" type="primary" @click="OnSearch">搜索</el-button>
          <el-button size="small" icon="el-icon-edit" type="success" @click="addDir">新增目录</el-button>
          <el-button v-if="subjects.id && subjects.name" type="text" class="colright" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
      </el-form>
      </div>
      <!-- 提示框 -->
      <el-alert class="dir-alert"
        :title="`数据一共${this.pageTotal}条`"
        type="info">
      </el-alert>
      <!-- 表格 -->
        <div class="sub-table">
          <el-table
          v-loading="loading"
          :data="directorysListData"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            >
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          >
          </el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
          >
          </el-table-column>
          <el-table-column
            label="创建者"
            prop="username"
            >
          </el-table-column>
          <el-table-column
            label="创建日期"
          >
            <template slot-scope="{row}">
              {{row.addDate | date}}
            </template>
          </el-table-column>
          <el-table-column
            prop="totals"
            label="面试题数量"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
          >
            <template slot-scope="{row}">
              <div v-if="row.state===1">已启用</div>
              <div v-else>已禁用</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <el-button  v-if="row.state===1" type="text" size="small" @click="Disable(row)">禁用</el-button>
              <el-button v-else type="text" size="small" @click="Enable(row)">启用</el-button>
              <el-button v-if="row.state===1" disabled type="text" size="small">修改</el-button>
              <el-button v-else type="text" size="small" @click="onEdit(row)">修改</el-button>
              <el-button v-if="row.state===1" disabled type="text" size="small">删除</el-button>
              <el-button v-else type="text" size="small" @click="onDel(row)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
        </div>

        <!-- 分页 -->
     <page-nation v-if="this.pageTotal>10" :formlist="formlist" :total="pageTotal" @on-success="GetDirectorysList()"/>
    </el-card>

    <!-- 新增弹窗 -->
    <el-dialog
      :title="this.addForm.id?'修改学科':'新增学科'"
      :visible.sync="dirDialogVisible"
      width="30%"
      @close="addDialogClose"
    >
      <el-form ref="addForm" :rules="addRules" :model="addForm" label-width="80px">
        <el-form-item v-if="!subjects.id && !subjects.name" label="所属学科">
          <el-select  v-model="addForm.subjectID" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in region"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="addForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dirDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  update,
  remove,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import PageNation from '../components/PageNation'
import dayjs from 'dayjs'
export default {
  name: 'directorys',
  components: {
    PageNation
  },
  data () {
    return {
      // 数据id'
      infoId: '',
      loading: true, // 加载数据
      // loadings: true,
      directorysListData: [], // 目录列表
      pageTotal: 0, // 共几页
      formlist: {
        page: 1,
        pagesize: 10 // 页尺寸
      },
      // 搜索框
      searchForm: {
        directoryName: '',
        state: ''
      },
      dirDialogVisible: false,
      // 新增学科
      addForm: {
        directoryName: '',
        subjectID: ''
      },
      region: [], // 所属学科下拉框选项
      addRules: {
        directoryName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 1, message: '最小长度为1', trigger: 'blur' }
        ]
      },
      StateData: {
        id: '',
        state: ''
      }
    }
  },
  // 获取地址栏数据
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },

  // 侦听地址栏数据
  watch: {
    '$route.query' () {
      this.GetDirectorysList()
    }
  },
  created () {
    this.GetDirectorysList()
  },

  methods: {
    // 获取目录列表
    async GetDirectorysList () {
      this.formlist.subjectID = this.subjects.id || null
      // console.log(this.formlist)
      const res = await list(this.formlist)
      this.loading = false
      this.directorysListData = res.data.items
      this.pageTotal = res.data.counts
      // console.log(res)
    },
    // 点击新增目录
    async addDir () {
      this.dirDialogVisible = true
      const res = await simple()
      // this.loadings = false
      this.region = res.data
      // console.log(this.region)
    },
    // 点击修改
    async onEdit (row) {
      this.dirDialogVisible = true
      const res = await simple()
      this.region = res.data
      this.addForm = { ...row }
    },
    // 点击新增确定
    async onSave () {
      await this.$refs.addForm.validate()
      if (this.subjects.id && this.subjects.name) {
        // this.addForm.subjectID = this.subjects.id
        if (this.addForm.id) {
          await update(this.addForm)
          this.$message.success('修改成功')
        } else {
          await add({
            subjectID: +this.subjects.id,
            directoryName: this.addForm.directoryName
          })
          this.$message.success('新增成功')
        }
        // this.$router.go('0')
      } else if (this.addForm.id) {
        await update(this.addForm)
        this.$message.success('修改成功')
      } else {
        await add(this.addForm)
        this.$message.success('新增成功')
      }
      this.dirDialogVisible = false
      this.GetDirectorysList()
    },
    // ×掉弹窗
    addDialogClose () {
      // 重置表单/ 重置校验
      this.$refs.addForm.resetFields()
      this.addForm = {
        subjectName: '',
        isFrontDisplay: 0
      }
    },
    // 删除部门
    onDel (row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // console.log(this.obj)
          await remove(row)
          this.$message.success('删除成功')
          this.GetDirectorysList()
        })
        .catch(() => {})
    },
    // 禁用按钮
    async Disable (row) {
      // console.log(row)
      this.StateData.id = row.id
      this.StateData.state = 0
      await changeState(this.StateData)
      this.GetDirectorysList()
    },
    // 启用按钮
    async Enable (row) {
      // console.log(row)
      this.StateData.id = row.id
      this.StateData.state = 1
      await changeState(this.StateData)
      this.GetDirectorysList()
    },
    // 点击清除
    onClear () {
      this.formlist = {
        page: 1,
        pagesize: 10 // 页尺寸
      }
    },
    // 点击搜索
    async OnSearch () {
      this.GetDirectorysList()
    }
  },
  // 时间过滤器
  filters: {
    date (val) {
      return dayjs(dayjs(val).$d).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.dir-alert {
  margin: 20px 0;
}
.box-card {
  margin: 10px;
}
.breadcrumb {
  margin-bottom: 20px;
}
.sub-table {
  margin-bottom: 20px;
}
</style>
